<template lang="html">
  <el-dialog :title="dialogTitle" :append-to-body="true" :close-on-click-modal="false" :show-close="false"
    v-model="dialogVisible" @close="close" width="600px">

    <el-container v-loading="dialogLoading" class="chapter-detail-container">
      <el-main>
        <el-form label-width="100px" :model="chapterEntity" ref="chapterForm" class="edit-pane" :inline="false"
          :rules="chapterFormRules">
          <el-form-item label="章节名称" prop="catalogueName">
            <el-input v-model="chapterEntity.catalogueName" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="书源Key" prop="sourceKey">
            <el-input v-model="chapterEntity.sourceKey" style="width: 400px" disabled></el-input>
          </el-form-item>
          <el-form-item label="内容链接" prop="contentLink">
            <el-input v-model="chapterEntity.contentLink" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="关键字" prop="keyword">
            <el-input v-model="chapterEntity.keyword" style="width: 400px "></el-input>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">关闭</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="js">
import { ref, inject, defineExpose } from 'vue';
import { ElMessage } from 'element-plus';
import _ from 'lodash';
import { modify } from '@/api/chapterMgr';
const { onSuccess } = inject('chapterMgrProvide');


const dialogVisible = ref(false); // 弹窗是否可见
const dialogLoading = ref(false); // 弹窗加载状态
const isEdit = ref(true); // 是否编辑状态
const dialogTitle = ref(""); // 弹窗标题
const initChapterEntity = () => {
  return {
    id: '', // 章节ID
    catalogueName: '', // 章节名称
    sourceKey: '', // 书源Key
    contentLink: '', // 内容链接
    keyword: '', // 关键字
  }
};

const chapterEntity = ref(initChapterEntity());
const chapterForm = ref(null); // 表单
const chapterFormRules = {
  catalogueName: [
    { required: true, message: '章节名称不能为空', trigger: 'blur' },
  ],
  sourceKey: [
    { required: true, message: '书源Key不能为空', trigger: 'blur' },
  ],
  contentLink: [
    { required: true, message: '内容链接不能为空', trigger: 'blur' },
    { type: 'url', message: '内容链接格式不正确', trigger: 'blur' },
  ],
  keyword: [
    { required: true, message: '关键字不能为空', trigger: 'blur' },
  ],
};

/**
 * 关闭弹窗
 */
function close() {
  if (dialogLoading.value) {
    return false;
  }
  dialogVisible.value = false;
  chapterEntity.value = initChapterEntity();
}

/**
 * 保存
 */
function save() {
  dialogLoading.value = true;
  saveDebounce();
}

const saveDebounce = _.debounce(() => {
  chapterForm.value.validate((vaild) => {
    if (!vaild) {
      dialogLoading.value = false;
      ElMessage.error("数据验证不通过，请检查输入!");
      return;
    }

    let chapter = Object.assign({}, chapterEntity.value);
    let fun = modify;
    fun(chapter).then((res) => {
      if (res == null || !res.isSuccess) {
        ElMessage.error(res.message || "操作失败");
        return;
      }
      ElMessage.success("保存成功");
      dialogLoading.value = false;
      onSuccess();
      close();
    }).finally(() => {
      dialogLoading.value = false;
    });
  });
}, 500);

/**
 *  打开弹窗
 * @param setting 书源设置项
 */
function open(chapter) {
  dialogLoading.value = false;
  if (chapterForm.value) {
    chapterForm.value.resetFields();
  }
  if (chapter && chapter.id) {
    isEdit.value = true;
    dialogTitle.value = "编辑章节";
    chapterEntity.value = Object.assign({}, chapter);
  }

  dialogVisible.value = true;
}

defineExpose({
  openDialog: open,
});

</script>
<style lang="less"></style>
